<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>市场活动</title>
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination/en.js"></script>
    <script type="text/javascript" src="common/js/common.js"></script>
</head>
<body>

<%-- 创建全局提示框 --%>
<div class="globalAlert"
     style="position: absolute;top:150px;left: 50%;width: 25%; z-index: 1000;text-align: center;vertical-align: center">
    <div class="alert alert-success" role="alert" style="height: 50px;" id="alert-success"></div>
    <div class="alert alert-info" role="alert" style="height: 50px;" id="alert-info"></div>
    <div class="alert alert-warning" role="alert" style="height: 50px;" id="alert-warning"></div>
    <div class="alert alert-danger" role="alert" style="height: 50px;" id="alert-danger"></div>
</div>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="createOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="createOwner"></select>
                        </div>
                        <label for="createActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control createInput" id="createActivityName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control createInput" id="create-startTime">
                        </div>
                        <label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control createInput" id="create-endTime">
                        </div>
                    </div>
                    <div class="form-group">

                        <label for="create-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control createInput" id="create-cost">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-describe" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control createInput" rows="3" id="create-describe"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <input type="hidden" id="editId" class="editInput">
                        <label for="editOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control editInput" id="editOwner"/>
                        </div>
                        <label for="editName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control editInput" id="editName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="editStartDate" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control editInput" id="editStartDate">
                        </div>
                        <label for="editEndDate" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control editInput" id="editEndDate">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="editCost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control editInput" id="editCost">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="editDescribe" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control editInput" rows="3" id="editDescribe"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="updateBtn">更新</button>
            </div>
        </div>
    </div>
</div>

<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>市场活动列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <label for="searchName"></label><input class="form-control" type="text" id="searchName">
                        <label for="hidden-searchName"></label><input class="hidden" type="text" id="hidden-searchName">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <label for="searchOwner"></label><input class="form-control" type="text" id="searchOwner">
                        <label for="hidden-searchOwner"></label><input class="hidden" type="text"
                                                                       id="hidden-searchOwner">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">开始日期</div>
                        <label for="searchStartDate"></label><input class="form-control" type="date"
                                                                    id="searchStartDate"/>
                        <label for="hidden-searchStartDate"></label><input class="hidden" type="date"
                                                                           id="hidden-searchStartDate"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">结束日期</div>
                        <label for="searchEndDate"></label><input class="form-control" type="date" id="searchEndDate"/>
                        <label for="hidden-searchEndDate"></label><input class="hidden" type="date"
                                                                         id="hidden-searchEndDate"/>
                    </div>
                </div>


                <button type="button" class="btn btn-default" id="searchBtn">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-primary" id="addBtn">
                    <span class="glyphicon glyphicon-plus"></span> 创建
                </button>
                <button type="button" class="btn btn-default" id="editBtn"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button type="button" class="btn btn-danger" id="deleteBtn"><span
                        class="glyphicon glyphicon-minus"></span> 删除
                </button>
            </div>

        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><label>
                        <input type="checkbox" id="checkAll"/>
                    </label></td>
                    <td>名称</td>
                    <td>所有者</td>
                    <td>开始日期</td>
                    <td>结束日期</td>
                </tr>
                </thead>
                <tbody id="activityBody">
                </tbody>
            </table>
        </div>

        <div style="height: 50px; position: relative;top: 30px;">
            <div id="activityPage">
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        // 进入页面，刷新市场活动列表
        activityList(1, 3);
        // 隐藏提示框
        $("#alert-success").hide();
        $("#alert-info").hide();
        $("#alert-warning").hide();
        $("#alert-danger").hide();

        // 创建市场活动操作
        $("#addBtn").click(function () {
            getUserList();
            $("#createActivityModal").modal("show");
        });

        // 修改市场活动操作
        $("#editBtn").click(function () {
            let $check = $("input[name=checkbox]:checked");
            if ($check.length === 0) {
                globalAlert(alert_warning, "请选择要修改的记录！");
            } else if ($check.length > 1) {
                globalAlert(alert_warning, "只能同时选择一条记录修改")
            } else {
                let id = $check.val();
                findActivity(id);
                $("#editActivityModal").modal("show");
            }
        });

        // 更新市场活动操作
        $("#updateBtn").click(function () {
            updateActivity();
            $("input[name=checkbox]:checked").prop("check", false);

        })

        // 保存市场活动操作
        $("#saveBtn").click(function () {
            $.ajax({
                url: "workbench/activity/saveActivity.do",
                data: {
                    "owner": $.trim($("#createOwner").val()),
                    "name": $.trim($("#createActivityName").val()),
                    "startDate": $.trim($("#create-startTime").val()),
                    "endDate": $.trim($("#create-endTime").val()),
                    "cost": $.trim($("#create-cost").val()),
                    "description": $.trim($("#create-describe").val())
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    if (data.result) {
                        globalAlert(alert_success, "保存成功");
                        // 刷新市场活动信息列表
                        activityList(1, $("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
                        // 关闭模态框
                        $("#createActivityModal").modal("hide");
                        // 清空文本框中数据
                        // 可以使用js原生的reset方法，重置表单域的文本框，$("#aaa")[0].reset()
                        $(".createInput").val("");
                    }
                }
            });
        });

        // 查询市场活动操作
        $("#searchBtn").click(function () {

            // 用隐藏域保存搜索条件
            $("#hidden-searchOwner").val($.trim($("#searchOwner").val()));
            $("#hidden-searchName").val($.trim($("#searchName").val()));
            $("#hidden-searchStartDate").val($.trim($("#searchStartDate").val()));
            $("#hidden-searchEndDate").val($.trim($("#searchEndDate").val()));

            activityList(1, $("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
        });

        // 全选、反选操作
        $("#checkAll").click(function () {
            $("input[name=checkbox]").prop("checked", this.checked);
        });
        $("#activityBody").on("click", $("input[name=checkbox]"), function () {
            // 判断已经选择的框的数量是否和所有选择框的数量一致，如果一致，则代表全选，否则不全选
            $("#checkAll").prop("checked", $("input[name=checkbox]").length === $("input[name=checkbox]:checked").length);
        });

        // 删除市场活动操作
        $("#deleteBtn").click(function () {
            let checkbox = $("input[name=checkbox]:checked");
            let param = "";
            // 可能是单选，也有可能是多选
            if (confirm("确认删除所选记录？")) {
                if (checkbox.length === 0) {
                    globalAlert("danger", "请选择要删除的选项！");
                    return -1;
                } else if (checkbox.length === 1) {
                    param = "id=" + checkbox[0].value;
                } else {
                    // url:workbench/activity/delete.do?id=xxx&id=xxx&id=xxx

                    // 拼接参数
                    for (var i = 0; i < checkbox.length; i++) {
                        param += "id=" + $(checkbox[i]).val();
                        if (i !== checkbox.length - 1) {
                            param += "&";
                        }
                    }
                }
                $.ajax({
                    url: "workbench/activity/deleteActivity.do",
                    data: param,
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        // data:{"result":true/false}
                        if (data.result) {
                            globalAlert(alert_success, "删除成功");
                            activityList(1, $("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
                        } else {
                            globalAlert(alert_danger, "删除失败");
                        }
                    },
                    error: function () {
                        globalAlert(alert_warning, "服务器出现问题，请稍后再试")
                    }
                });
            }
        })
    });

    function findActivity(id) {
        $.ajax({
            url: "workbench/activity/findActivity.do",
            data: {
                "id": id
            },
            type: "get",
            dataType: "json",
            success: function (data) {
                // data: {"activity":activity}
                $("#editId").val(data.id);
                $("#editOwner").val(data.owner);
                $("#editName").val(data.name);
                $("#editStartDate").val(data.startDate);
                $("#editEndDate").val(data.endDate);
                $("#editCost").val(data.cost);
                $("#editDescribe").val(data.description);
            },
            error: function () {
                globalAlert(alert_danger, "获取活动信息失败！");
            }
        });
    }

    function updateActivity() {
        // 小技巧：设定变量时，为了区分变量的属性，可以在变量名前加上一个$，这表示该变量为jQuery对象，区别于js原生对象

        $.ajax({
            url: "workbench/activity/updateActivity.do",
            data: {
                "id": $("#editId").val(),
                "owner": $("#editOwner").val(),
                "name": $("#editName").val(),
                "startDate": $("#editStartDate").val(),
                "endDate": $("#editEndDate").val(),
                "cost": $("#editCost").val(),
                "description": $("#editDescribe").val()
            },
            type: "post",
            dataType: "json",
            success: function (data) {
                // data: {"result":true/false}
                if (data.result) {
                    globalAlert(alert_success, "更新数据成功");
                    // 刷新市场活动信息列表
                    activityList($("#activityPage").bs_pagination('getOption', 'currentPage'), $("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
                    // 关闭模态框
                    $("#editActivityModal").modal("hide");
                    // 清空文本框中数据
                    // 可以使用js原生的reset方法，重置表单域的文本框，$("#aaa")[0].reset()
                    $(".editInput").val("");
                }
            },
            error: function () {
                globalAlert(alert_danger, "更新数据失败！");
            }
        })
        ;
    }


    function getUserList() {
        let html = "<option disabled selected>-----请选择-----</option>"
        $.ajax({
            url: "settings/user/getUserList.do",
            type: "get",
            dataType: "json",
            success: function (data) {
                /*遍历的每一个元素就是一个user*/
                $.each(data, function (index, item) {
                    html += "<option>" + item.name + "</option>";
                    $("#createOwner").html(html);
                    $("#editOwner").html(html);
                });
            },
            error: function () {
                html += "<option disabled>获取用户列表失败 </option>"
            }
        });
    }

    function activityList(pageNo, pageSize) {
        // 每次加载都清空全选框的选中状态
        $("#checkAll").prop("checked", false);

        $("#searchOwner").val($.trim($("#hidden-searchOwner").val()));
        $("#searchName").val($.trim($("#hidden-searchName").val()));
        $("#searchStartDate").val($.trim($("#hidden-searchStartDate").val()));
        $("#searchEndDate").val($.trim($("#hidden-searchEndDate").val()));
        let html = "";
        $.ajax({
            url: "workbench/activity/getActivityList.do",
            data: {
                "owner": $("#searchOwner").val(),
                "name": $("#searchName").val(),
                "startDate": $("#searchStartDate").val(),
                "endDate": $("#searchEndDate").val(),
                "pageNo": pageNo,
                "pageSize": pageSize
            },
            type: "get",
            dataType: "json",
            success: function (data) {
                $.each(data.dataList, function (index, item) {
                    html += '<tr class="active">';
                    html += '<td><input type="checkbox" name="checkbox" value="' + item.id + '"/></td>';
                    html += '<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/activity/detail.do?id=' + item.id + '\';">' + item.name + '</a></td>';
                    html += '<td>' + item.owner + '</td>';
                    html += '<td>' + item.startDate + '</td>';
                    html += '<td>' + item.endDate + '</td>';
                    html += '</tr>';
                });
                $("#activityBody").html(html);

                let totalPages = Math.ceil(data.total / pageSize);

                $("#activityPage").bs_pagination({
                    currentPage: pageNo,
                    rowsPerPage: pageSize,
                    maxRowsPerPage: 20,   // 每页最多显示的记录条数
                    totalPages: totalPages, // 总页数
                    totalRows: data.total,  // 总记录数
                    visiblePageLinks: 3, // 显示几个卡片
                    showGoToPage: true,
                    showRowsPerPage: true,
                    showRowsInfo: true,
                    showRowsDefaultInfo: true,
                    onChangePage: function (event, data) {
                        activityList(data.currentPage, data.rowsPerPage);
                    }
                });
            }
        });
    }
</script>
</html>